<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区域 -->
      <SubFilter />
      <!-- 排序区域 -->
      <div class="goods-list">
        <SubSort />
        <SubList />
      </div>
    </div>
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category'
import { ref, onMounted, provide } from 'vue'
import { useRoute } from 'vue-router'
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import SubList from './components/sub-list.vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    const subCates = ref({})
    const route = useRoute()
    async function getSubCates () {
      const { result } = await findSubCategoryFilter(route.params.id)
      console.log('二级分类：', result)
      /**
       * 需求：品牌和规格数据增加全部选项和为每个选项增加选中状态数据
       */
      // 1. 给品牌增加全部选项和选中状态
      result.brands.forEach(brand => {
        brand.selected = false
      })
      result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })

      result.saleProperties.forEach(md => {
        // 1. 给规格增加全部选项
        md.properties.forEach(prop => {
          prop.selected = false
        })
        md.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })
      subCates.value = result
    }

    /**
     * 列表过滤实现总结
     * 扩展：
     * 1. vuex中存储的数据，为啥所有页面或js中都可以获取？=》vuex中的数据state存储到内存，不会随着页面切换而被销毁
     * 2. 组件中定义的v2(data)或v3的ref/reactive数据，随用随创建
     * 方案：
     * 1. 数据在顶层维护=》怎么共享给子组件？=》1. v3使用依赖注入provide/inject 2. v2通过父传子或eventBus、vuex
     * 2. 子孙组件可以修改数据或者监听数据的变化=》实现功能
     */

    // 筛选条件数据
    const filterParams = ref({
      attrs: [], // 一般商品属性 => {groupName: "规格", propertyName: "CPE加厚手套-100只/盒"}
      sortField: null, // 排序 => // publishTime(最新), orderNum(人气), price(价格), evaluateNum(评论)
      brandId: null // 品牌ID => '1'
    })
    // 提供过滤条件数据
    provide('filterParams', filterParams)
    // 提供二级分类数据给子组件
    provide('subCates', subCates)
    onMounted(() => {
      getSubCates()
    })

    return { subCates }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
